<template>
  <div class="palette-list">
    <div v-for="(item, index) in baseSectionsData" :key="index" class="base-container">
      <div class="section-header" @click="openBaseRoutes(item, index)">
        <div class="sectionName" :title="item.sectionName">{{ item.sectionName }}（{{ item.routes.length }}）</div>
        <div class="arrow" v-show="item.routes.length > 0">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="palette-div open" :id="'myPaletteDiv' + index" :style="{ height: Math.ceil(item.routes.length / 2) * 90 + 'px' }"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    sections: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      activeNames: '',
      sectionsData: []
    };
  },
  watch: {
    sections: {
      handler(value) {
        this.sectionsData = structuredClone(value);
      },
      deep: true
    }
  },
  computed: {
    baseSectionsData() {
      return this.sectionsData.filter((item) => item.sectionId != -1);
    }
  },
  methods: {
    openBaseRoutes(item, index) {
      let basePaletteDom = document.querySelectorAll('.base-container .palette-div')[index];
      let arrowPaletteDom = document.querySelectorAll('.base-container .section-header .el-icon-arrow-right')[index];
      basePaletteDom.classList.toggle('open');
      arrowPaletteDom.classList.toggle('down');
    }
  }
};
</script>
<style scoped lang="scss">
.palette-list {
  overflow-y: scroll;
  height: calc(100vh - 165px);
  ::v-deep .el-collapse-item__content {
    padding-bottom: 0;
  }
  .base-container {
    overflow: hidden;
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ebeef5;
      cursor: pointer;
      .sectionName {
        user-select: none;
        font-size: 13px;
        color: #303133;
        height: 48px;
        line-height: 48px;
        padding-left: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .arrow {
        padding-right: 8px;
        ::v-deep .el-icon-arrow-right {
          font-size: 13px;
          transition: 0.3s;
          transform: rotate(0deg);
          &.down {
            transition: 0.3s;
            transform: rotate(90deg);
          }
        }
      }
    }

    .palette-div {
      width: 100%;
      overflow-x: hidden;
      transition: 0.3s height;
      &.open {
        transition: 0.3s height;
        height: 0 !important;
      }
    }
  }
}
</style>
